<template>
  <div>
    <van-nav-bar title="量化配置" left-text="返回" right-text="新增＋" left-arrow
                 @click-left="$router.push('/mine/future')"
                 @click-right="showPopup1 = true"/>
    <van-collapse v-model="activeRows" :style="{ height: `${tableHeight}px`, overflow: 'auto' }">
      <van-collapse-item v-for="item in tableData.datas" :key="item.hex_id" :name="item.hex_id">
        <template #default>
          {{ item.description }}
        </template>
        <template #value>
          <van-icon name="edit" color="#1989fa" @click="onSelect(item)">编辑</van-icon>
          <van-icon name="delete-o" color="#ee0a24" @click="onDelete(item)">删除</van-icon>
        </template>
        <template #title>
          <van-icon name="completed-o" color="#1989fa" @click="onCopy(item.hex_id)">{{ item.title }}</van-icon>
        </template>
      </van-collapse-item>
    </van-collapse>
    <pager v-model="queryParams.page" :total="tableData.total" :limit="queryParams.limit"
           :count="tableData.datas.length" @change="load"/>
    <van-popup v-model="showPopup1" position="bottom" :style="{ height: '80%' }">
      <hosted-form v-model="newForm" title="新建配置" @confirm="onSubmit" @cancel="showPopup1 = false"/>
    </van-popup>
    <van-popup v-model="showPopup2" position="bottom" :style="{ height: '80%' }">
      <hosted-form v-model="setForm" title="编辑配置" @confirm="onChange" @cancel="showPopup2 = false"/>
    </van-popup>
  </div>
</template>
<script>
import {Dialog, Notify} from 'vant'


export default {
  components: {
    HostedForm: () => import('@/components/HostedForm.vue'),
    Pager: () => import('@/components/Pager.vue')
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 86
    }
  },
  data() {
    return {
      newForm: {
        title: null,
        description: '暂无',
        sequence: 1,
        enabled: true,
        period: 'd',
        config: {
          long: {
            buy: {},
            sell: {}
          },
          short: {
            sell: {},
            buy: {}
          }
        }
      },
      setForm: {
        hex_id: null,
        title: null,
        description: '暂无',
        sequence: 1,
        enabled: true,
        period: 'd',
        config: {
          long: {
            buy: {},
            sell: {}
          },
          short: {
            sell: {},
            buy: {}
          }
        }
      },
      queryParams: {
        page: 1,
        limit: 20,
        order_by: 'sequence',
        sort_direction: 1
      },
      activeRows: [],
      showPopup1: false,
      showPopup2: false,
      tableData: {
        total: 0,
        datas: []
      }
    }
  },
  methods: {
    load() {
      this.$requests.post('/china_future/hosted/obtain', this.queryParams).then(resp => {
        this.tableData = resp
      })
    },
    onSelect(data) {
      this.setForm = data
      this.showPopup2 = true
    },
    onSubmit() {
      this.$requests.post('/china_future/hosted/create', this.newForm).then(resp => {
        if (resp) {
          this.showPopup1 = false
          this.load()
        }
      })
    },
    onChange() {
      this.$requests.post('/china_future/hosted/update', this.setForm).then(resp => {
        if (resp.n) {
          this.showPopup2 = false
          this.load()
        }
      })
    },
    onDelete(item) {
      Dialog.confirm({
        title: '提示',
        message: `是否删除配置：${item.title}`,
      }).then(() => {
        this.$requests.post('/china_future/hosted/delete', item).then(resp => {
          if (resp.n) {
            this.load()
          }
        })
      })
    },
    onCopy(text) {
      navigator.clipboard.writeText(text)
      Notify({ type: 'success', message: '复制哈希编号成功' });
    }
  },
  mounted() {
    this.load()
  }
}
</script>
